<template>
  <div class="diqu">
    <el-empty class='quanx' description="您无权访问" v-if="pid == 2 || com_id != 0"></el-empty>
    <div class="top_title" :style="{ '--zoom': zoom }">
      {{ changeList.title }}<br />
      <span class="top_title_Small">更新时间：{{ changeList.update_time }}</span>
    </div>
    <el-button class="off" :style="{ '--zoom': zoom }" @click="off">
      退出
    </el-button>
    <el-button class="return" :style="{ '--zoom': zoom }" @click="pushome">
      返回首页
    </el-button>
    <!-- <el-button class="switch" @click="pushswitch">
      下一屏
    </el-button> -->
    <el-button class="Fullscreen" :style="{ '--zoom': zoom }" @click="screen" icon="el-icon-full-screen">
    </el-button>
    <el-row :gutter="15" style="height: 90vh;">
      <el-col :span="6" style="height: 100%;">
        <div class="left_box_t">
          <div style="height:100%;width: 100%;" id="left_box_t"></div>
          <div class="left_text" :style="{ '--zoom': zoom }">各镇街本月走访情况</div>
        </div>
        <div class="left_box_t">
          <div style="height:100%;width: 100%;" id="left_box_t_z"></div>
          <div class="left_text" :style="{ '--zoom': zoom }">各镇街企业需求情况</div>
        </div>
        <div class="left_box_t">
          <div style="height:100%;width: 100%;" id="left_box_b_z"></div>
          <div class="left_text" :style="{ '--zoom': zoom }">各镇街本月需求解决情况</div>
        </div>
        <div class="left_box_t">
          <div style="height:100%;width: 100%;" id="left_box_b"></div>
          <div class="left_text" :style="{ '--zoom': zoom }">各镇街本月解决率情况</div>
        </div>
      </el-col>
      <el-col :span="12" style="height: 100%;">
        <div class="zho_box_t">
          <div class="left_text" :style="{ '--zoom': zoom }">走访数据</div>
          <div class="change_t" :style="{ '--zoom': zoom }">
            <el-row :gutter="11">
              <el-col :span="6" v-for="(item, index) in changeType" :key="index">
                <div class="change_box" :style="{ '--bgColor': item.bgc }">
                  <div class="change_box_new">
                    <div class="change_text"><span style="color: #fff;">{{ item.value }}</span></div>
                    <div><span style="font-size:30px;padding-right: 5px;font-weight: bold;">{{ item.num }}</span>{{
                      item.Company
                    }}</div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="change_b" :style="{ '--zoom': zoom }">
            <el-row :gutter="11">
              <el-col :span="6" v-for="(item, index) in changeList.list" :key="index">
                <div class="change_b_item" :style="{ '--bgColor': changeTypeBgc[index] }">
                  <div>
                    <div>本月</div>
                    <div>{{ item.name }}</div>
                  </div>
                  <div class="item_t"><span>+{{ item.this_month }}</span></div>
                  <div>上月：{{ item.last_month }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
          <!-- <div id="change_Histogram" class="change_Histogram"></div> -->
        </div>
        <div class="zho_box_b">
          <div class="zho_box_b_main" id="main"></div>
          <div class="left_text" :style="{ '--zoom': zoom }">需求类型分析</div>
          <el-row :gutter="0" style="height: 100%;">
            <el-col :span="12" style="height:100%">
              <el-row :gutter="20" style="height: 100%;">
                <el-col :span="12" style="height: 48%;" :style="{ '--bgc': item.bgc, '--zoom': zoom }"
                  v-for="(item, index) in demandList" :key="index" class="demand_box">
                  <div class="left_demand">
                    <div class="left_demand_new">
                      <div class="demand_title"><span style="color: #fff;">{{ item.value }}</span></div>
                      <div><span style="font-size: 30px;margin-right:5px;font-weight: bold;">
                          <CountTo :startVal='0' :endVal='Number(item.Number)' :duration='2100' />
                        </span>{{
                          item.Company
                        }}
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12" style="height: 100%;">
              <div class="pie_new">
                <div id="pie" class="pie"></div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6" style="height: 100%;">
        <div class="right_box_z">
          <div class="right_text">
            <el-row :gutter="10">
              <el-col :style="{ '--zoom': zoom }" :span="6" v-for="(item, index) in patent" :key="index">
                <div class="box" :class="index == piedataActivation ? 'box_bgc' : ''" @click="handleClick(item, index)">
                  <div class="num">
                    <CountTo :startVal='0' :endVal='Number(item.number)' :duration='2100' />
                  </div>
                  <div class="title">{{ item.value }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
          <!-- <div :data="patentList" :class-option="optionHover" style="overflow: hidden;height: 750px;"> -->
          <div style="overflow: hidden;height: 85%;">
            <div class="item_big" ref="item_big" @mousemove="mousemove" @mouseleave="mouseleave"
              style="overflow:auto;height: 100%;">
              <div class="box_z_item" :class="piedataActivation == 3 ? 'box_z_item_3' : ''"
                v-for="(item, index) in patentList" :key="index" :style="{ '--zoom': zoom }" @click="goCompany(item)">
                <div v-if="piedataActivation == 3" class="honor">
                  <el-row :gutter="17">
                    <el-col class="honor_l" :span="15">
                      <div class="t_box">
                        <div>{{ item.ano }}</div>
                        <div>{{ item.years }}</div>
                        <div>{{ item.address }}</div>
                      </div>
                      <div class="b_box">{{ item.name }}</div>
                    </el-col>
                    <el-col class="honor_r" :span="8">
                      {{ item.company }}
                    </el-col>
                  </el-row>
                </div>
                <div v-else class="country">
                  <el-row>
                    <el-col :span="3">{{ item.address }}</el-col>
                    <el-col :span="17">{{ item.name }}</el-col>
                    <el-col :span="3">{{ item.years }}</el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import * as echarts from 'echarts'
import { getPatentList, getExamplesList } from '@/api/web'
import {
  visitcenter,
  visitcentertype,
  visitgetleftlist,
  visitgetrightlist,
} from "@/api/newuser.js";
import CountTo from 'vue-count-to'
import { log } from 'util';

export default {
  components: { vueSeamlessScroll, CountTo },
  data() {
    return {
      zoom: 1,
      timer: null,
      pid: null,
      com_id: null,
      Histogram1: [
      ],
      Histogram2: [
      ],
      Histogram3: [
      ],
      Histogram4: [
      ],
      Histogram5: [
      ],
      HistogramType: {
        legendShow: false, //右上脚小图标
        YsplitLine: true, //分割线
        YaxisLabel: false, //Y轴文字
        XaxisLabel: true, //X轴文字
        average: true, //平均线
      },
      changeTypeBgc: ['#006CFF', '#7F6FEC', '#FF8A6E', '#2BCFB6'],
      changeType: [
        {
          value: '年度走访企业',
          bgc: '#006CFF',
          Company: '例',
          Number: '',
        },
        {
          value: '年度企业需求',
          bgc: '#7f6fec',
          Company: '例',
          Number: '',
        },
        {
          value: '年度已解决需求',
          bgc: '#FF8A6E',
          Company: '例',
          Number: '',
        },
        {
          value: '年度需求解决率',
          bgc: '#2BCFB6',
          Company: '%',
          Number: '',
        }
      ],

      patentList: [],
      // dimensions1: ['product', '上月数量', '本月数量'],
      dimensions2: ['product', '上月数量', '本月数量'],
      demandList: [
        {
          value: '国际申请',
          bgc: '#0297FE',
          Company: '例',
          Number: '436',
        },
        {
          value: '年度企业需求',
          bgc: '#02ECFF',
          Company: '例',
          Number: '49',
        },
        {
          value: '政策申请',
          bgc: '#0043FF',
          Company: '例',
          Number: '48',
        },
        {
          value: '专利侵权',
          bgc: '#016AFD',
          Company: '例',
          Number: '34',
        }
      ],
      patentname: ['dem', 'pro', 'adv', 'patent'],
      patent: [
        {
          value: '国家示范企业',
          number: '',
        },
        {
          value: '省级示范企业',
          number: '',
        },
        {
          value: '国家优势企业',
          number: '',
        },
        {
          value: '专利奖',
          number: '',
        },
      ],


      changeList: {},
      changeTypename: ['company', 'demand', 'true_demand', 'ratio'],
      piecolor: ['#0496ff', '#09e3ff', '#0745eb', '#0494fd', '#fe836c', '#786ce0'],
      piedata: [],
      piedataActivation: 0,
      page: 0,
      page_size: 10,
      patentType: 0,
      Histogramtimer1: null,
      Histogramtimer2: null,
      Histogramtimer3: null,
      Histogramtimer4: null,
      scrollDom: null,
      scrollDomTop: 0,
    };
  },
  // 监听属性 
  computed: {
    defaultOption() {
      return {
        step: 0.0001, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
      }
    }
  },
  async created() {
    this.pid = this.$store.state.user.pid
    this.com_id = this.$store.state.user.com_id
    this.visitcenter();
    this.visitcentertype();
    this.visitgetleftlist();
    this.visitgetrightlist();
    // let data = await getPatentList()
    // this.patentList = data.list
    let width = document.documentElement.clientWidth || document.body.clientWidth;
    this.zoom = width / 1920;
  },
  mounted() {
    this.scrollDom = this.$refs.item_big;
    this.timer = setInterval(() => {
      this.scrollDomTop = this.scrollDom.scrollTop
      this.scrollDom.scrollTop += 1;
      if (this.scrollDomTop == this.scrollDom.scrollTop) {
        this.scrollDom.scrollTop = 0;
      }
    }, 40);
  },
  methods: {
    goCompany(row) {
      this.$router.push({
        path: '/workEnterprisevisit',
        query: {
          company_id: row.id,
          company_name: row.name,
        }
      })
    },
    HistogramSetInterval1() {
      let myChart = echarts.init(document.getElementById('left_box_t'), 'dark');
      let type = 1
      // this.Histogramtimer1 = setInterval(() => {
      //   if (type == 1) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '上月数量': true,
      //           '本月数量': false,
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 2) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '上月数量': false,
      //           '本月数量': true,
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 3) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '上月数量': true,
      //           '本月数量': true,
      //         }
      //       }
      //     })
      //     type = 1
      //   }
      // }, 5000)
    },
    HistogramSetInterval2() {
      let myChart = echarts.init(document.getElementById('left_box_t_z'), 'dark');
      let type = 1
      // this.Histogramtimer2 = setInterval(() => {
      //   if (type == 1) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '上月数量': true,
      //           '本月数量': false,
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 2) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '上月数量': false,
      //           '本月数量': true,
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 3) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '上月数量': true,
      //           '本月数量': true,
      //         }
      //       }
      //     })
      //     type = 1
      //   }
      // }, 5000)
    },
    HistogramSetInterval3() {
      let myChart = echarts.init(document.getElementById('left_box_b_z'), 'dark');
      let type = 1
      // this.Histogramtimer3 = setInterval(() => {
      //   if (type == 1) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '上月数量': true,
      //           '本月数量': false,
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 2) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '上月数量': false,
      //           '本月数量': true,
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 3) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '上月数量': true,
      //           '本月数量': true,
      //         }
      //       }
      //     })
      //     type = 1
      //   }
      // }, 5000)
    },
    HistogramSetInterval4() {
      let myChart = echarts.init(document.getElementById('left_box_b'), 'dark');
      let type = 1
      // this.Histogramtimer4 = setInterval(() => {
      //   if (type == 1) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '上月数量': true,
      //           '本月数量': false,
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 2) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '上月数量': false,
      //           '本月数量': true,
      //         }
      //       }
      //     })
      //     type += 1
      //   } else if (type == 3) {
      //     myChart.setOption({
      //       legend: {
      //         selected: {
      //           '上月数量': true,
      //           '本月数量': true,
      //         }
      //       }
      //     })
      //     type = 1
      //   }
      // }, 5000)
    },
    off() {
      this.$router.push({
        path: '/newhome'
      })
    },
    screen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    mousemove() {
      clearInterval(this.timer);
      this.timer = null;
    },
    mouseleave() {
      this.scrollDom = this.$refs.item_big;
      this.timer = setInterval(() => {
        this.scrollDomTop = this.scrollDom.scrollTop
        this.scrollDom.scrollTop += 1;
        if (this.scrollDomTop == this.scrollDom.scrollTop) {
          this.scrollDom.scrollTop = 0;
        }
      }, 40);
    },
    async load() {
      this.page++;
      let data
      if (this.patentType == 3) {
        data = await getPatentList({
          page: this.page
        })
      } else {
        data = await getExamplesList({
          type: this.patentType + 1,
          page: this.page,
        });
      }
      if (data.list.length > 0) {
        this.patentList = this.patentList.concat(data.list)
      } else {
        // this.$message({
        //   showClose: true,
        //   message: '暂无更多数据了哦',
        //   type: 'warning'
        // });
        this.page--;
      }
    },
    async handleClick(item, index) {
      this.piedataActivation = index
      let num = index += 1
      if (num == 1) {
        this.patentList = this.changeList.res2
      } else if (num == 2) {
        this.patentList = this.changeList.res3
      } else if (num == 3) {
        this.patentList = this.changeList.res4
      } else if (num == 4) {
        this.patentList = this.changeList.res1
      }

      // let demo = this.$refs.item_big;
      this.scrollDom.scrollTop = 0;
      // this.page = 1
      // this.patentType = index
      // this.patentList = []
      // let data
      // if (index == 3) {
      //   data = await getPatentList()
      // } else {
      //   data = await getExamplesList({
      //     type: index + 1,
      //   });
      // }
      // this.patentList = data.list
      // let itembox = document.getElementsByClassName('box_z_item')
      // let Height = 0
      // this.$nextTick(() => {
      //   for (let i = 0; i < itembox.length; i++) {
      //     Height += itembox[i].offsetHeight
      //   }
      //   if (Height < 750) {
      //     for (let i = 0; i < 2; i++) {
      //       this.load()
      //     }
      //   }
      // })
    },
    async visitcenter() {
      this.changeList = await visitcenter()
      this.changeType = this.changeType.map((item, index) => {
        item.num = this.changeList[this.changeTypename[index]]
        return item
      })
      this.Histogram5 = this.changeList.open

      this.$nextTick(() => {
        // let chartDom5 = document.getElementById('change_Histogram');
        // this.Histogram(chartDom5, this.Histogram5, this.dimensions2, this.HistogramType)
      })

      this.patent[0].number = this.changeList.count2
      this.patent[1].number = this.changeList.count3
      this.patent[2].number = this.changeList.count4
      this.patent[3].number = this.changeList.count1

      this.patentList = this.changeList.res2

    },
    async visitcentertype() {
      let data = await visitcentertype()
      data = data.list.map((item, index) => {
        let demo = {}
        demo.itemStyle = {
          color: this.piecolor[index]
        }
        demo.value = item.number
        demo.name = item.name
        if (index < this.demandList.length) {
          this.demandList[index].value = item.name
          this.demandList[index].Number = item.number
        }
        return demo
      })
      //饼图
      let pie = document.getElementById('pie');
      this.pie(pie, data);
    },
    async visitgetleftlist() {
      let data = await visitgetleftlist()
      this.Histogram1 = data.visit
      this.Histogram2 = data.demand
      this.Histogram3 = data.true_demand
      this.Histogram4 = data.ratio
      //柱状图
      let chartDom1 = document.getElementById('left_box_t');
      this.Histogram(chartDom1, this.Histogram1, this.dimensions2, null, 1);

      let chartDom2 = document.getElementById('left_box_t_z');
      this.Histogram(chartDom2, this.Histogram2, this.dimensions2, null, 2);

      let chartDom3 = document.getElementById('left_box_b_z');
      this.Histogram(chartDom3, this.Histogram3, this.dimensions2, null, 3);

      let chartDom4 = document.getElementById('left_box_b');
      this.Histogram(chartDom4, this.Histogram4, this.dimensions2, null, 4)
    },
    async visitgetrightlist() {
      let data = await visitgetrightlist()
      // this.patent.map((item, index) => {
      //   item.number = data[this.patentname[index]]
      // })
      // this.patentList = data.list
    },


    Histogram(chartDom, dataList, dimensions, HistogramType, type) {
      let myChart = echarts.init(chartDom, 'dark');
      let option = {
        tooltip: {
          textStyle: { // 提示框浮层的文本样式。
            color: '#41feff',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            fontSize: 10,
          },
          backgroundColor: 'rgba(12, 16, 63,.7)',
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (datas) {
            let prp_name = datas[0].value.prp_name;
            let ratio_name = datas[0].value.ratio_name;
            if (dimensions.length > 3) {
              let res = `
                <div>
                  <span>本月：${datas[0].value.本月数量}</span>
                  <span>全区占比：${datas[0].value.全区占比}少字段</span>
                </div>
                <div>
                  <span>上月：${datas[0].value.上月数量}</span>
                  <span style='color:#40FFAF'>${datas[0].value.ratio_name}：${datas[0].value.ratio_status}</span>
                </div>
                <div>
                  <span>去年同期：${datas[0].value.去年同期}</span>
                  <span style='color:#FF443A'>${datas[0].value.prp_name}：${datas[0].value.prp_status}</span>
                </div>
              `
              return res;

            } else {
              let res = `
                <div>
                  <span>本月：${datas[0].value.本月数量}</span>
                  <span>${datas[0].value.prp_name}：${datas[0].value.prp_status}</span>
                </div>
                <div>
                  <span>上月：${datas[0].value.上月数量}</span>
                  <span style='color:#40FFAF'>${datas[0].value.ratio_name}：${datas[0].value.ratio_status}</span>
                </div>
              `
              return res;

            }

          }
        },
        backgroundColor: '', //设置无背景色
        grid: { // 让图表占满容器
          top: "60px",
          left: "60px",
          right: "30px",
          bottom: "40px"
        },
        legend: {
          show: HistogramType ? HistogramType.legendShow : true,//右上脚小图标
          top: "20px",
          right: "30px",
          itemWidth: 8,
          itemHeight: 8,
          selected: {
            '上月数量': true,
            '本月数量': true,
          }
        },
        dataset: {
          dimensions: dimensions,
          source: dataList
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            show: HistogramType ? HistogramType.XaxisLabel : true,//不显示坐标文字
            lineStyle: {
              normal: {
                color: '#fff',
                width: 1,
                type: 'solid',
              }
            },
            interval: 0,
            formatter: function (value) {
              // console.log(value);
              //获取页面宽度
              let width = document.body.clientWidth;
              //根据宽度判断显示字数
              if (width <= 1360) {
                return value.split("").join("\n");
              } else {
                return value;
              }
            }
          },
        },
        yAxis: {
          splitLine: { //不显示分割线
            show: HistogramType ? HistogramType.YsplitLine : false,
            lineStyle: {
              color: '#fff',
              width: 1,
              type: 'solid',
            }
          },
          axisLabel: {
            show: HistogramType ? HistogramType.YaxisLabel : true,//不显示坐标文字
          },
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            itemStyle: {
              color: HistogramType ? '#219ddc' : '#6053fb'
            },
            barMaxWidth: '25px',
          },
          {
            type: 'bar',
            barMaxWidth: '25px',
            markLine: {
              symbol: 'none',
              data: HistogramType && HistogramType.average ? [] : [
                {
                  type: 'average',
                  name: '平均值',
                  lineStyle: {
                    normal: {
                      color: '#fff',
                      width: 1,
                      type: 'solid',
                    }
                  },
                  label: {  //自定义显示标签
                    normal: {
                      color: '#000',
                      formatter: function (params) {
                        return ''
                      },
                    }
                  }
                }
              ],
            },
            itemStyle: {
              color: HistogramType ? '#dc9829' : '#4fa5e5'
            }
          }],
      };
      option && myChart.setOption(option);
      // window.onresize = myChart.resize;
      window.addEventListener("resize", function () {
        myChart.resize();
        })
      // 首次开启定时器
      // if (type == 1) {
      //   this.HistogramSetInterval1()
      // } else if (type == 2) {
      //   this.HistogramSetInterval2()
      // } else if (type == 3) {
      //   this.HistogramSetInterval3()
      // } else if (type == 4) {
      //   this.HistogramSetInterval4()
      // }
    },
    pie(chartDom, data) {
      let myChart = echarts.init(chartDom, 'dark');
      let option = {
        backgroundColor: '', //设置无背景色
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: (params) => {
            var html = params.color + params.data.name + params.data.value + params.percent.toFixed(0) + '%';

            let res = ` 
                  <div style='display: inline-block;width:10px;height:10px;background-color:${params.color};border-radius: 50%;'></div>
                  <span style='margin:0 5px 0 0;font-weight: bold;font-size: 14px;'>${params.data.name}</span>
                  <span style='margin:0 5px'>${params.data.value}例</span>
                  <span style='margin:0 0 0 5px'>${params.percent.toFixed(0)}%</span>
              `
            return res;
          }
        },
        legend: {
          orient: 'vertical',
          right: '1%',
          top: '0%',
          // bottom: 20,
          type: 'scroll'
        },
        series: [
          {
            center: ['35%', '50%'],
            name: '',
            type: 'pie',
            radius: ['55%', '90%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 5, //圆角
              borderColor: '#111129',
              borderWidth: 5 //间隙
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      };
      option && myChart.setOption(option);
      // window.onresize = myChart.resize;
      window.addEventListener("resize", function () {
        myChart.resize();
        })
    },
    pushswitch() {
      this.$router.push({
        path: '/visualization/Patent'
      })
    },
    pushome() {
      this.$router.push({
        path: '/visualization'
      })
    }
  },
  beforeDestroy() {
    this.mousemove()
  },
};
</script>

<style scoped lang="less">
.quanx {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #111129;
  z-index: 999;
}

.switch {
  color: #fff;
  position: absolute;
  top: 65px;
  right: 28px;
  font-size: 14px;
  padding: 10px 20px;
  background-color: #0E1B47;
  border: 1px solid #67d7fd;
}

.Fullscreen {
  color: #fff;
  position: absolute;
  top: 20px;
  right: 28px;
  font-size: 14px;
  padding: 10px 20px;
  background-color: #0E1B47;
  border: 1px solid #67d7fd;
  zoom: var(--zoom);
}

.return {
  color: #fff;
  position: absolute;
  top: 20px;
  left: 110px;
  font-size: 14px;
  padding: 10px 20px;
  background-color: #0E1B47;
  border: 1px solid #67d7fd;
  margin-left: 0;
  zoom: var(--zoom);
}

.off {
  color: #fff;
  position: absolute;
  top: 20px;
  left: 28px;
  font-size: 14px;
  padding: 10px 20px;
  background-color: #0E1B47;
  border: 1px solid #67d7fd;
  zoom: var(--zoom);
}

.diqu {
  position: relative;
  // min-width: 1920px;
  overflow: hidden;
  min-height: 100vh;
  background: #111129;
  padding: 0 28px;

  .top_title {
    padding-top: 1%;
    color: #fff;
    font-size: 36px;
    text-align: center;
    width: 100%;
    height: 8vh;
    background: url(../../../assets/web/top_k.png) no-repeat;
    background-size: 100% 100%;
    font-weight: bold;
    line-height: 76%;
    zoom: var(--zoom);

    .top_title_Small {
      font-size: 14px;
      font-weight: initial;
    }
  }

  .left_box_t {
    position: relative;
    width: 100%;
    height: 23.5%;
    background: url(../../../assets/web/zho_s_k.png) no-repeat;
    background-size: 100% 100%;
    margin: 15px 0;

    .left_text {
      position: absolute;
      top: 14px;
      left: 14px;
      font-size: 20px;
      color: #fff;
      zoom: var(--zoom);
    }
  }

  .zho_box_t {
    width: 100%;
    // height: 326px;
    height: 51%;
    background: url(../../../assets/web/zho_s_k.png) no-repeat;
    background-size: 100% 100%;
    margin: 15px 0 15px 0;
    padding: 55px 30px 28px 30px;
    color: #fff;
    position: relative;
    overflow: hidden;

    .change_t {
      height: 40%;
      zoom: var(--zoom);

      .el-row {
        height: 100%;

        .el-col {
          height: 100%;

          .change_box {
            color: var(--bgColor);
            font-size: 16px;
            text-align: center;
            height: 100%;
            background-color: #0F1B47;
            line-height: initial;
            // padding: 23px 20px 29px 27px;
            position: relative;

            .change_box_new {
              position: absolute;
              top: 50%;
              left: 45%;
              width: 80%;
              transform: translate(-40%, -50%);
            }

            .change_text {
              position: relative;
              display: inline-block;
            }

            .change_text::before {
              content: '';
              display: inline-block;
              width: 5px;
              height: 12px;
              border-radius: 3px;
              background-color: var(--bgColor);
              margin-right: 5px;
              vertical-align: middle;
              position: absolute;
              top: 50%;
              left: -10px;
              transform: translate(0px, -50%);
            }
          }

        }
      }
    }

    .change_b {
      height: 53%;
      zoom: var(--zoom);

      .el-row {
        height: 100%;

        .el-col {
          height: 100%;

          .change_b_item {
            margin-top: 11px;
            font-size: 16px;
            text-align: center;
            height: 100%;
            background-color: #0F1B47;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            line-height: initial;

            .item_t {
              span {
                background-color: var(--bgColor);
                border-radius: 5px;
                color: #fff;
                font-size: 16px;
                padding: 2px 20px 2px 20px;
                display: inline-block;
              }
            }
          }
        }
      }
    }

    .change_Histogram {
      position: absolute;
      width: 100%;
      height: 38%;
      bottom: 15px;
      left: -19px;
    }

    .left_text {
      position: absolute;
      top: 18px;
      left: 30px;
      font-size: 20px;
      color: #fff;
      zoom: var(--zoom);
    }
  }

  .zho_box_b {
    width: 100%;
    height: 46.5%;
    background: url(../../../assets/web/zho_s_k.png) no-repeat;
    background-size: 100% 100%;
    margin: 15px 0 15px 0;
    position: relative;
    padding: 50px 0px 31px 30px;
    color: #fff;
    overflow: hidden;

    .zho_box_b_main {
      width: 70%;
      height: 120%;
      position: absolute;
      top: -30px;
      left: -30px;
    }

    .left_text {
      position: absolute;
      top: 18px;
      left: 30px;
      font-size: 20px;
      color: #fff;
      zoom: var(--zoom);
    }

    .pie_new {
      height: 100%;

      .pie {
        // position: absolute !important;
        // width: 130%;
        // // height: 396px;
        height: 100%;
        // top: -50px;
        // left: -85px;
      }
    }

    .left_demand {
      background-color: #0F1B47;
      height: 100%;
      text-align: left;
      font-size: 16px;
      padding: 38px 0px 29px 46px;
      line-height: initial;
      position: relative;
      color: var(--bgc);
      position: relative;

      .left_demand_new {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .demand_title {
        display: inline-block;
        position: relative;

      }

      .demand_title::before {
        content: '';
        display: inline-block;
        width: 5px;
        height: 12px;
        border-radius: 3px;
        background-color: var(--bgc);
        margin-right: 5px;
        vertical-align: middle;
        position: absolute;
        top: 50%;
        left: -10px;
        transform: translate(0px, -50%);
      }
    }

    .demand_box {
      zoom: var(--zoom);
    }

    .demand_box:nth-child(3),
    .demand_box:nth-child(4) {
      margin-top: 20px;
    }
  }


  .right_box_z {
    width: 100%;
    height: 97.8%;
    background: url(../../../assets/web/Visit_r.png) no-repeat;
    background-size: 100% 100%;
    margin: 15px 0;
    position: relative;
    color: #fff;
    padding: 30px 22px;

    .right_text {
      margin-bottom: 20px;

      .el-row {
        .el-col {
          zoom: var(--zoom);

          .box {
            cursor: pointer;
            background-color: #0F1B47;
            text-align: center;
            height: 92px;
            font-size: 14px;
            padding: 23px 5px 29px 5px;
            line-height: initial;
            color: #5AA3FF;

            .num {
              font-size: 30px;
            }

          }

          .box_bgc {
            background-color: #28293e;
            color: #fff;

          }
        }
      }
    }

    .item_big {
      width: 105%;

      .box_z_item_3 {
        border-bottom: 1px solid #0d315e;
      }

      .box_z_item {
        // display: flex;
        font-size: 14px;
        padding: 10px 0;
        color: #4B98F7;
        line-height: normal;
        transition: 0.5s color;
        zoom: var(--zoom);

        .honor {

          .el-row {
            margin-left: 0 !important;
            margin-right: 0 !important;

            .honor_l {
              .t_box {
                display: flex;
                justify-content: space-between;
              }
            }

            .honor_r {}
          }
        }

        .country {
          text-align: center;
        }
      }

      .box_z_item:hover {
        color: #68D8FE !important;
        background-color: #28293f !important;
      }
    }

  }
}

@media (max-width: 1360px) {}

@media (max-width: 1280px) {}</style>
